<template>
  <div>
    <h1>{{ ancientPoetry.category }}</h1>
    <p>{{ ancientPoetry.author }} - {{ ancientPoetry.origin }}</p>
    <h3>{{ ancientPoetry.content }}</h3>
  </div>
</template>
<script lang="ts">
import { reactive, onMounted, toRefs, nextTick, getCurrentInstance } from "vue";
export default {
  components: {},
  name: "home",
  setup() {
    const { proxy }: any = getCurrentInstance();
    const data = reactive({
      title: "Hello",
      pageTitle: "pageTitleName",
      ancientPoetry: {},
    });
    // 接受到值必须在onMounted生命周期里面进行。
    onMounted(async () => {
      // console.log("title：", data.title);
      // console.log(proxy.$apiFetch);
      // 获取当前组件实例
      // const { proxy }: any = getCurrentInstance();
      console.log("全局", proxy);
      // console.log("API全局挂载：", proxy.$apiFetch);
      // console.log("当前路由：", proxy.$router.currentRoute.value);
      // onMounted end
      init();
    });
    const init = async () => {
      proxy.$apiFetch
        .gushiFetch()
        .then((res: any) => {
          data.ancientPoetry = res;
          console.log(data.ancientPoetry);
        })
        .catch((error) => {
          console.log(error);
        });
    };
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
